<template>

  <div class="content-management-wrapper">
    <el-menu mode="vertical" :default-active="leftActiveNav" theme="dark" @select="handleNavSelected"
             class="content-management-left-nav">
      <el-menu-item-group title="教辅管理">
        <el-menu-item index="book-INITIALIZED"><i class="el-icon-message"></i>待提交()</el-menu-item>
        <el-menu-item index="book-SUBMITED"><i class="el-icon-message"></i>审核中()</el-menu-item>
        <el-menu-item index="book-"><i class="el-icon-message"></i>全部()</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="教材管理">
        <el-menu-item index="textBook-INITIALIZED"><i class="el-icon-message"></i>待提交()</el-menu-item>
        <el-menu-item index="textBook-SUBMITED"><i class="el-icon-message"></i>审核中()</el-menu-item>
        <el-menu-item index="textBook-"><i class="el-icon-message"></i>全部()</el-menu-item>
      </el-menu-item-group>
    </el-menu>

    <div class="content-management-content" v-show="type === 'book'">

      <div class="mbottom10">
        <el-input
          v-model="nameOrNumberOrISBN"
          @keyup.enter=""
          size="small"
          placeholder="请输入书名/编号/ISBN查询" max="200"
          class="input-default remark searchParam">
        </el-input>
        <el-button type="primary" size="small" icon="search" @click="searchBookList">查询</el-button>
        <el-button type="primary" size="small" @click="">添加教辅</el-button>
      </div>

      <el-table
        class="bookListTable"
        v-bind:data="bookList"
        border
        stripe
        style="width: auto!important;">
        <el-table-column
          label="书籍编号"
          prop="bookNo"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="封面"
          prop="portrait"
          width="120"
          align="center">
          <template scope="scope">
            <img class="book-cover" :src="scope.row.coverURL">
          </template>
        </el-table-column>
        <el-table-column
          type=""
          label="书名"
          prop="bookName"
          min-width="130"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="适用范围"
          prop="suitProvinces"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="教辅审核"
          prop="statusText"
          width="70"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="目录总数"
          prop="catalogueCount"
          width="70"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="创建人"
          prop="creatorName"
          min-width="80"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="创建日期"
          prop="createAt"
          min-width="80"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="操作"
          prop=""
          min-width="120"
          align="center">
          <template scope="scope">
            <el-button
              size="small"
              type="info"
              v-if="scope.row.statusText == '待审核'||scope.row.statusText == '合格' || scope.row.statusText == '待转解析' || scope.row.statusText == '已上线' || scope.row.statusText == '待指派'"
              @click="viewCatalogue(scope.$index, scope.row)">查看目录
            </el-button>
            <el-button
              size="small"
              type="info"
              v-if="scope.row.statusText == '待审核'||scope.row.statusText == '合格' || scope.row.statusText == '待转解析' || scope.row.statusText == '已上线' || scope.row.statusText == '待指派'"
              @click="viewBookBaseInfo(scope.$index, scope.row)">查看基本信息
            </el-button>
            <el-button
              size="small"
              type="success"
              v-if="scope.row.statusText == '录入中'"
              @click="submitToCheck(scope.$index, scope.row)">提交审核
            </el-button>
            <el-button
              size="small"
              type="danger"
              v-if="scope.row.statusText == '待审核'"
              @click="cancelSubmit(scope.$index, scope.row)">撤销审核
            </el-button>
            <el-button
              size="small"
              type="info"
              v-if="scope.row.statusText == '录入中'"
              @click="modifyBookBaseInfo(scope.$index, scope.row)">修改基本信息
            </el-button>
            <el-button
              size="small"
              type="info"
              v-if="scope.row.statusText == '录入中'"
              @click="manageCatalogue(scope.$index, scope.row)">目录管理
            </el-button>
            <el-button
              size="small"
              type="danger"
              v-if="scope.row.statusText == '录入中'"
              @click="deleteBookModal(scope.$index, scope.row)">删除
            </el-button>
            <el-button
              size="small"
              type="info"
              v-if="scope.row.relevance==true"
              @click="correlateToTextBookModal(scope.$index, scope.row)">关联教材
            </el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <div class="content-management-content" v-show="type === 'textBook'">

      <span>科目：</span>
      <el-select v-model="subject" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 120px;">
        <el-option
          v-for="item in textBookOptions.subject"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">系列：</span>
      <el-select v-model="series" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 150px;">
        <el-option
          v-for="item in textBookOptions.series"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">版本：</span>
      <el-select v-model="suitVersion" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 150px;">
        <el-option
          v-for="item in textBookOptions.suitVersion"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">年级：</span>
      <el-select v-model="grade" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 100px;">
        <el-option
          v-for="item in textBookOptions.grade"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">册别：</span>
      <el-select v-model="volume" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 100px;">
        <el-option
          v-for="item in textBookOptions.volume"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">教材时间：</span>
      <el-select v-model="useYear" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 100px;">
        <el-option
          v-for="item in textBookOptions.useYear"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="margin-left: 20px;">品牌：</span>
      <el-select v-model="brand" size="small" placeholder="请选择" @change="handleSelected" style="max-width: 150px;">
        <el-option
          v-for="item in textBookOptions.brand"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>

      <div style="margin-top: 15px;">
        <el-button type="primary" size="small" icon="search" @click="searchTextBook">查询</el-button>
        <el-button type="primary" size="small" @click="">添加教材</el-button>
        <el-button type="primary" size="small" @click="clearTextBookSearchOptions" v-if="showClearBtn">清空筛选条件</el-button>
      </div>

      <el-table
        class="textBookListTable"
        v-bind:data="textBookList"
        border
        stripe
        style="width: auto">
        <el-table-column
          label="书籍编号"
          prop="no"
          width="90"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="书名"
          prop="name"
          min-width="120"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="教材时间"
          prop="useYear"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="审核状态"
          prop="status"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="目录总数"
          prop="catalogueCount"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="创建人"
          prop="creator"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="创建日期"
          prop="createAt"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          type=""
          label="操作"
          prop=""
          min-width="120"
          align="center">
          <template scope="scope">
            <el-button
              size="small"
              type="info"
              @click="viewTextBookCatalogue(scope.$index, scope.row)">查看目录
            </el-button>
            <el-button
              size="small"
              type="info"
              @click="viewTextBookBaseInfo(scope.$index, scope.row)">查看基本信息
            </el-button>
            <el-button
              size="small"
              type="success"
              @click="submitTextBookToCheck(scope.$index, scope.row)">提交审核
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="cancelSubmitTextBook(scope.$index, scope.row)">撤销审核
            </el-button>
            <el-button
              size="small"
              type="info"
              @click="modifyTextBookBaseInfo(scope.$index, scope.row)">更新基本信息
            </el-button>
            <el-button
              size="small"
              type="info"
              @click="manageTextBookCatalogue(scope.$index, scope.row)">目录管理
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="deleteTextBookModal(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentPageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-left: 160px;margin-top: 20px;">
    </el-pagination>
  </div>
</template>
<style lang="less">
  .content-management-wrapper {
    overflow: auto;
    margin-top: 60px;
    height: 100%;
    .content-management-left-nav {
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      position: fixed;
      top: 61px;
      left: 0;
      bottom: 0;
      width: 160px;
      height: 100%;

      .el-menu-item {
        padding-left: 30px !important;
      }

    }
    .content-management-content {
      margin-left: 170px;
      padding-right: 10px;
      padding-top: 15px;
      .book-cover {
        width: 80px;
      }
      .bookListTable {
        margin: 10px 0 0 0;
      }
      .textBookListTable {
        margin: 10px 0 0 0;
      }
    }
  }
</style>
<script>
    export default {

      name: 'contentManagement',
      data () {
        return {
          nameOrNumberOrISBN: '',
          subject: '',
          grade: '',
          volume: '',
          useYear: '',
          suitVersion: '',
          series: '',
          brand: '',
          showClearBtn: false
        }
      },
      methods: {
        getBookList () {   // 获取教辅列表
          let nameOrNumberOrISBN = this.nameOrNumberOrISBN
          let status = this.status
          this.$store.dispatch('FETCH_BOOK_LIST_DATA_OF_CONTENT_MANAGEMENT', { status, nameOrNumberOrISBN })
        },
        getTextBookList () {    // 获取教材列表
          let status = this.status || null
          let subject = this.subject || null
          let grade = this.grade || null
          let volume = this.volume || null
          let useYear = this.useYear || null
          let suitVersion = this.suitVersion || null
          let series = this.series || null
          let brand = this.brand || null
          this.$store.dispatch('FETCH_TEXT_BOOK_LIST_DATA_OF_CONTENT_MANAGEMENT', { status, subject, grade, volume, useYear, suitVersion, series, brand })
        },
        getListAccordingToType () {  // 根据type属性获取对应的书籍列表
          this.type === 'book' ? this.getBookList() : this.getTextBookList()
        },
        handleNavSelected (index, indexPath) {
          let type = index.split('-')[0]
          let status = index.split('-')[1] || null
          this.clearTextBookSearchOptions()
          this.clearBookSearchParams()
          this.$store.dispatch('INIT_PAGINATION_STATUS_CONTENT_MANAGEMENT')
            .then(() => {
              this.$router.push({
                path: 'contentManagement',
                query: {
                  type,
                  status
                }
              })
            })
        },
        handleSizeChange (val) {
          let pageSize = val || 10
          this.$store.dispatch('CHANGE_PAGE_SIZE_CONTENT_MANAGEMENT', { pageSize })
            .then(() => {
              this.getListAccordingToType()
            })
        },
        handleCurrentPageChange (val) {
          let currentPage = val || 1
          this.$store.dispatch('CHANGE_CURRENT_PAGE_CONTENT_MANAGEMENT', { currentPage })
            .then(() => {
              this.getListAccordingToType()
            })
        },
        clearTextBookSearchOptions () {   // 清空教材筛选条件
          this.subject = ''
          this.grade = ''
          this.volume = ''
          this.useYear = ''
          this.suitVersion = ''
          this.series = ''
          this.brand = ''
        },
        clearBookSearchParams () {
          this.nameOrNumberOrISBN = ''
        },
        handleSelected (value) {
          if (value) this.showClearBtn = true
        },
        // 操作教辅的方法
        searchBookList () {
          this.getBookList()
        },
        viewCatalogue (index, item) {

        },
        viewBookBaseInfo (index, item) {

        },
        submitToCheck (index, item) {

        },
        cancelSubmit (index, item) {

        },
        modifyBookBaseInfo (index, item) {

        },
        manageCatalogue (index, item) {

        },
        deleteBookModal (index, item) {

        },
        correlateToTextBookModal (index, item) {

        }, // 操作教辅的方法end

        // 操作教材的方法
        searchTextBook () {
          this.getTextBookList()
        },
        viewTextBookCatalogue (index, item) {

        },
        viewTextBookBaseInfo (index, item) {

        },
        submitTextBookToCheck (index, item) {

        },
        cancelSubmitTextBook (index, item) {

        },
        modifyTextBookBaseInfo (index, item) {

        },
        manageTextBookCatalogue (index, item) {

        },
        deleteTextBookModal (index, item) {

        }// 操作教材的方法end

      },
      ready () {

      },
      computed: {
        textBookOptions () {
          return {
            subject: this.$store.state.dictionary.subject,
            grade: this.$store.state.dictionary.grade,
            volume: this.$store.state.dictionary.volume,
            useYear: [{id: '2017', value: '2017'}, {id: '2016', value: '2016'}, {id: '2015', value: '2015'}, {id: '2014', value: '2014'}, {id: '2013', value: '2013'}, {id: '2012', value: '2012'}, {id: '2011', value: '2011'}, {id: '2010', value: '2010'}],
            suitVersion: this.$store.state.dictionary.version,
            series: this.$store.state.dictionary.series,
            brand: this.$store.state.dictionary.brand
          }
        },
        bookList () {
          return this.$store.state.contentManagementStore.bookList
        },
        textBookList () {
          return this.$store.state.contentManagementStore.textBookList
        },
        type () {  // 当前的书籍类型教辅(book)/教材(textBook)
          return this.$route.query.type
        },
        status () {
          return this.$route.query.status
        },
        leftActiveNav () {
          return `${this.$route.query.type}-${this.$route.query.status ? this.$route.query.status : ''}`
        },
        currentPage () {
          return Number(this.$store.state.contentManagementStore.currentPage) || 1
        },
        pageSize () {
          return this.$store.state.contentManagementStore.pageSize
        },
        totalSize () {
          return this.$store.state.contentManagementStore.totalSize
        }
      },
      mounted () {
        if (this.$route.query.type === 'book') {
          this.getBookList()
        } else {
          this.getTextBookList()
        }
      },
      watch: {
        $route () {
          if (this.type === 'book') {
            this.getBookList()
          } else if (this.type === 'textBook') {
            this.getTextBookList()
          }
        }
      }
    }

</script>
